<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
	<meta name="format-detection" content="telephone=no,address=no,email=no"/>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<title>KAA电商管理后台_商品添加</title>
	<script src="${path}/js/jquery-2.1.1.min.js"></script>
	<script src="${path}/js/sidebar-menu.js"></script>
	<%--<script src="${path}/js/uploadPreview.js"></script>--%>
	<link href="${path}/css/login.css" rel="stylesheet" media="all">
</head>
<script>

    function category(value) {
        $("#categoryId").val(value)
        document.getElementById("form2").submit();
    }
        function subCategory(value) {
            var categoryId = $("#categoryId").val();
            $("#subCategoryId").val(value)
            $("#categoryId").val(categoryId)
            $("#subCategoryIds").val(value)
            $("#categoryIds").val(categoryId)
            document.getElementById("form2").submit();
        }
</script>
<body class="main" id="pageCotent">
	<h1>KAA电商管理后台</h1>
	<jsp:include page="sidebarNav.jsp"></jsp:include><!-- main_sidebar -->

	<div class="main_con_wrap">
		<form name="form1" method="post"
			  action="${path}/addProduct" id="form1"  enctype="multipart/form-data">
			<input id="categoryIds" name="categoryId" value="${categoryId}" style="display: none">
			<input id="subCategoryIds" name="subCategoryId" value="${subCategoryId}" style="display: none">
		<div class="main_con goods_add">
			<p class="select_add">
				<span class="title fl">选择商品类型：</span>
				<select id="goodslist_category" onchange="category(this.value);">
					<option value=""${categoryId == null ? 'selected':""}>选择品类</option>
					<c:forEach items="${categoryList}" var="item">
						<option value="${item.id}" ${categoryId == item.id ? 'selected':""}>${item.categoryName}</option>
					</c:forEach>
				</select>

			<p>
				<select id="goodslist_series" onchange="subCategory(this.value);">
					<option value=""${subCategoryId == null ? 'selected':""}>选择系列</option>
					<c:forEach items="${subCategoryList}" var="item1">
						<option value="${item1.id}"${subCategoryId == item1.id ? 'selected':""}>${item1.subCategoryName}</option>
					</c:forEach>
				</select>
			</p>

			<select id="goodslist_standard" name="colorSizeId">
				<option value="">规格</option>
				<c:forEach items="${colorSizeList}" var="item2">
					<option value="${item2.id}">${item2.colorSizeName}</option>
				</c:forEach>
			</select>
				<span class="clear"></span>
			</p><!-- select_add -->	
			
			<p>
				<span class="title fl">输入商品名称：</span>
				<input id="productName" name="productName" type="text" class="add_goodsname"/>
				<span class="clear"></span>
			</p>
			
			<%--<p>
				<span class="title fl">SPU商家编码：</span>
				<input id="add_goodspu" type="text" class="add_goodspu"/>
				<span class="clear"></span>
			</p>--%>
			
			<p>
				<span class="title fl">输入关键词：</span>
				<input id="keyWord" name="keyWord" type="text" class="add_goodskey" placeholder="最长15个字符，以“，”逗号分隔" />
				<span class="clear"></span>
			</p>
			
			<p>
				<span class="title fl">是否上架：</span>
				<select id="sell" name="sell" id="sell">
					  <option value="选择上下架">选择上下架</option>
					  <option value="1">上架</option>
					  <option value="0">下架</option>
				</select>
				<span class="clear"></span>
			</p>
			
			<p>
				<span class="title fl">库存：</span>
				<input id="stocks" name="stocks" type="text" class="add_goodsstock"/>
				<span class="clear"></span>
			</p>
			
			<p>
				<span class="title fl">基础销量：</span>
				<input id="basicsNum" name="basicsNum" type="text" class="add_goodssales"/>
				<span class="clear"></span>
			</p>
			
			<div class="add_price">
				<span class="title fl">价格：</span>
				
				<p>
				<span>市场价格</span>
				<input id="originalPrice" name="originalPrice" type="text" class="add_market_price"/>
				</p>
				
				<p>
				<span>销售价格</span>
				<input id="nowPrice" name="nowPrice" type="text" class="add_selling_price"/>
				</p>
				
				<p class="last_p">
				<span>成本价格</span>
				<input id="cost" name="cost" type="text" class="add_cost_price"/>
				</p>
				<div class="clear"></div>
			</div>
			<div class="upload_img">
				<span class="title fl">商品小图：</span>
				<ul id="small_img">
				  <li>
					<label for="up_img_WU_FILE_0"></label>
					<input id="up_img_WU_FILE_0" type="file" name="myfiles">
					<img id="imgShow_WU_FILE_0" width="100%" height="100%">
					<div class="dummy"></div>
				  </li>
				  <li>
					<label for="up_img_WU_FILE_1"></label>
					<input id="up_img_WU_FILE_1" type="file" name="myfiles">
					<img id="imgShow_WU_FILE_1" width="100%" height="100%">    
					<div class="dummy"></div>
				  </li>
				  <li>
					<label for="up_img_WU_FILE_2"></label>
					<input id="up_img_WU_FILE_2" type="file" name="myfiles">
					<img id="imgShow_WU_FILE_2" width="100%" height="100%">   
					<div class="dummy"></div>				
				  </li>
				  <li>
					<label for="up_img_WU_FILE_3"></label>
					<input id="up_img_WU_FILE_3" type="file" name="myfiles">
					<img id="imgShow_WU_FILE_3" width="100%" height="100%">   
					<div class="dummy"></div>				
				  </li>
				  <li>
					<label for="up_img_WU_FILE_4"></label>
					<input id="up_img_WU_FILE_4" type="file" name="myfiles">
					<img id="imgShow_WU_FILE_4" width="100%" height="100%">   
					<div class="dummy"></div>				
				  </li>
				  <div class="clear"></div>
				</ul>
				<div class="clear"></div>
			</div>
			
			<div class="goods_parameters">
				<span class="title fl">商品参数：</span>
				<ul>
					<li><span>品牌：</span><input type="text" class="goodspara_text" name="brand" id="brand"/></li>
					<li><span>货号：</span><input type="text" class="goodspara_text" name="productCode" id="productCode"/></li>
					<li><span>摆型：</span><input type="text" class="goodspara_text" name="pendulumType" id="pendulumType"/></li>
					<li><span>领型：</span><input type="text" class="goodspara_text" name="collarType" id="collarType"/></li>
					<li><span>颜色：</span><input type="text" class="goodspara_text" name="color"id="color"/></li>
					<li><span>尺码：</span><input type="text" class="goodspara_text" name="size"id="size"/></li>
					<li><span>年份/季节：</span><input type="text" class="goodspara_text" name="year" id="year"/></li>
					<li><span>风格：</span><input type="text" class="goodspara_text" name="style" id="style"/></li>
					<li><span>面料：</span><input type="text" class="goodspara_text" name="fabric" id="fabric"/></li>
					<li><span>袖长：</span><input type="text" class="goodspara_text" name="sleeve" id="sleeve"/></li>
					<li><span>适用年龄：</span><input type="text" class="goodspara_text" name="age" id="age"/></li>
					<li><span>适用场景：</span><input type="text" class="goodspara_text" name="scene" id="scene"/></li>
					<li><span>流行元素：</span><input type="text" class="goodspara_text" name="elements" id="elements"/></li>
					<li><span>服饰工艺：</span><input type="text" class="goodspara_text" name="technology" id="technology"/></li>
					<li><span>适用对象：</span><input type="text" class="goodspara_text" name="object" id="object"/></li>
					<li><span>腰型：</span><input type="text" class="goodspara_text" name="waistType" id="waistType"/></li>
					<div class="clear"></div>
				</ul>
				<div class="clear"></div>
			</div>
			<div class="upload_img">
				<span class="title fl">大图展示：</span>			
				<ul id="big_img">
				  <li>
					<label for="up_img_WU_FILEs_0"></label>
					<input id="up_img_WU_FILEs_0" type="file" name="myfiles">
					<img id="imgShow_WU_FILEs_0" width="100%" height="100%">
					<div class="dummy"></div>
				  </li>
				  <li>
					<label for="up_img_WU_FILEs_1"></label>
					<input id="up_img_WU_FILEs_1" type="file" name="myfiles">
					<img id="imgShow_WU_FILEs_1" width="100%" height="100%">    
					<div class="dummy"></div>
				  </li>
				  <li>
					<label for="up_img_WU_FILEs_2"></label>
					<input id="up_img_WU_FILEs_2" type="file" name="myfiles">
					<img id="imgShow_WU_FILEs_2" width="100%" height="100%">   
					<div class="dummy"></div>				
				  </li>
				</ul>
				<div class="clear"></div>
			</div>
			
			
		</div><!-- main_con -->
			<button name="button" class="goodscatadd_btn btn"  id="goodscatadd_btn" type="submit">保  存</button>
		</form>
		<form name="form2" method="post"
			  action="${path}/toAddProduct" id="form2"
			  class="form2">
			<input id="categoryId" name="categoryId" value="${categoryId}" style="display: none">
			<input id="subCategoryId" name="subCategoryId" value="${subCategoryId}" style="display: none">
		</form>
	</div><!-- main_con_wrap -->

	<div class="footer_copyright">
		<p>苏州知行合一网络科技有限公司提供技术支持，版权所有</p>
	</div><!-- footer_copyright -->

<script>
	/////////////////////////侧边栏按钮
	$.sidebarMenu($('.sidebar-menu'))
   /* function file_click(){
        var WARP = document.getElementById('small_img');
        var WARP_LI = WARP.getElementsByTagName('li');
        for(var i=0; i<WARP_LI.length;i++){
            new uploadPreview({ UpBtn: "up_img_WU_FILE_"+i, ImgShow: "imgShow_WU_FILE_"+i});
        }
        var WARPs = document.getElementById('big_img');
        var WARP_LIs = WARPs.getElementsByTagName('li');
        for(var i=0; i<WARP_LIs.length;i++){
            new uploadPreview({ UpBtn: "up_img_WU_FILEs_"+i, ImgShow: "imgShow_WU_FILEs_"+i});
        }
    }
    window.onload = file_click;*/
    $("#up_img_WU_FILE_0").change(function(){
        var objUrl = getObjectURL(this.files[0]) ;
        console.log("objUrl = "+objUrl) ;
        if (objUrl) {
            $("#imgShow_WU_FILE_0").attr("src", objUrl) ;
        }
    }) ;
    $("#up_img_WU_FILE_1").change(function(){
        var objUrl = getObjectURL(this.files[0]) ;
        console.log("objUrl = "+objUrl) ;
        if (objUrl) {
            $("#imgShow_WU_FILE_1").attr("src", objUrl) ;
        }
    }) ;
    $("#up_img_WU_FILE_2").change(function(){
        var objUrl = getObjectURL(this.files[0]) ;
        console.log("objUrl = "+objUrl) ;
        if (objUrl) {
            $("#imgShow_WU_FILE_2").attr("src", objUrl) ;
        }
    }) ;
    $("#up_img_WU_FILE_3").change(function(){
        var objUrl = getObjectURL(this.files[0]) ;
        console.log("objUrl = "+objUrl) ;
        if (objUrl) {
            $("#imgShow_WU_FILE_3").attr("src", objUrl) ;
        }
    }) ;
    $("#up_img_WU_FILE_4").change(function(){
        var objUrl = getObjectURL(this.files[0]) ;
        console.log("objUrl = "+objUrl) ;
        if (objUrl) {
            $("#imgShow_WU_FILE_4").attr("src", objUrl) ;
        }
    }) ;
    $("#up_img_WU_FILEs_0").change(function(){
        var objUrl = getObjectURL(this.files[0]) ;
        console.log("objUrl = "+objUrl) ;
        if (objUrl) {
            $("#imgShow_WU_FILEs_0").attr("src", objUrl) ;
        }
    }) ;
    $("#up_img_WU_FILEs_1").change(function(){
        var objUrl = getObjectURL(this.files[0]) ;
        console.log("objUrl = "+objUrl) ;
        if (objUrl) {
            $("#imgShow_WU_FILEs_1").attr("src", objUrl) ;
        }
    }) ;
    $("#up_img_WU_FILEs_2").change(function(){
        var objUrl = getObjectURL(this.files[0]) ;
        console.log("objUrl = "+objUrl) ;
        if (objUrl) {
            $("#imgShow_WU_FILEs_2").attr("src", objUrl) ;
        }
    }) ;
    function getObjectURL(file) {
        var url = null ;
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }

</script>
</body>
</html>